<template>
  <div>
      <div class='addBrand'>
            <h3>编辑Banner</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                <el-form-item label="Banner名称:" prop="name">
                    <el-input  class='input' style="width:30%" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="Banner排序:" prop="sort">
                    <el-input  class='input' style="width:30%" v-model="ruleForm.sort"></el-input>
                </el-form-item>
                <el-form-item label="Banner跳转:" prop="action">
                    <el-select class="input" style="width:30%"  v-model="ruleForm.action"  placeholder="选择链接">
                            <el-option
                                v-for="item in option"
                                :key="item.id"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="ruleForm.action==1" label="Banner链接:" prop="link">
                    <el-input  class='input' style="width:30%" v-model="ruleForm.link"></el-input>
                </el-form-item>
                <el-form-item label="平台类型:" prop="status">
                    <el-radio v-model="ruleForm.platform" label="ALL">全部</el-radio>
                    <el-radio v-model="ruleForm.platform" label="JSAPI">小程序</el-radio>
                    <el-radio v-model="ruleForm.platform" label="APP">App</el-radio>
                </el-form-item>
                <el-form-item label="banner类型:" prop="status">
                    <el-radio v-model="ruleForm.type" label="0">banner</el-radio>
                    <el-radio v-model="ruleForm.type" label="1">广告</el-radio>
                </el-form-item>
                <el-form-item label="Banner状态:" prop="status">
                        <el-switch  v-model="status"></el-switch>
                        <!-- <el-checkbox v-model="status">{{status ? '有效': '无效'}}</el-checkbox> -->
                </el-form-item>
                <!-- 选择店铺 -->
                <!-- <el-form-item label="选择店铺:" prop="shopid" >
                    <div class="selGoods input"   style="margin-top:10px;width:30%">
                        <section>
                            <ul>
                                <li :key="item.id" v-for="item in addShopVal" style="display:inline-block; margin:5px;line-height:30px;">
                                    <span>{{item.storeName }}</span>
                                    <i title="删除" @click="deleteShop(item.storeNo,$event)" class="el-icon-close"></i>
                                </li>
                            </ul>
                        </section>
                    </div>
                    <el-button type="primary" style="margin-left:20px"  @click="handleShopClick">选择店铺</el-button>
                </el-form-item> -->
                <!-- 店铺列表 -->
                <!-- <transition name="fade">
                    <div class="popup-detail" v-loading="tableLoading" v-if="isShow">
                        <div class="selGoods">
                            <h3>选择店铺</h3>
                            <section>
                                <ul>
                                    <li :key="item.id" v-for="item in addShopVal" style="display:inline-block;margin:5px;line-height:30px;">
                                        <span>{{item.storeName}}</span>
                                        <i title="删除" @click="deleteShop(item.storeNo,$event)" class="el-icon-close"></i>
                                    </li>
                                </ul>
                            </section>
                        </div>
                        <div class="searchList">
                            <el-table
                                ref="multipleTable"
                                :data="searchShopList"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                                <el-table-column
                                    type="selection"
                                    width="55">
                                </el-table-column>
                                <el-table-column
                                    prop="storeName"
                                    label="店铺名称"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="storeNo"
                                    label="店铺编号"
                                    width="180">
                                </el-table-column>
                            </el-table>
                            
                            <section class="pagination" > 
                                <template v-if="page == 1"> 
                                    <el-button type="primary" disabled>上一页</el-button>
                                </template>
                                <template v-else> 
                                    <el-button type="primary" @click="pagePrev">上一页</el-button>
                                </template>
                                <template v-if="Math.ceil(total/10) <= page"> 
                                    <el-button type="primary" disabled>下一页</el-button>
                                </template>
                                <template v-else> 
                                    <el-button type="primary" @click="pageNext">下一页</el-button>
                                </template>
                                <template>
                                    <el-button  disabled>共{{this.total}}条</el-button>
                                    
                                    <el-button  disabled>第{{this.page}}页</el-button>
                                </template>
                            </section>
                        </div>
                        <section class="bottomAdd" style="margin-top:20px;float:right"> 
                            <el-button style="margin-left:0px;margin-right:10px" type="primary"  @click="addShop">增加</el-button>
                            <el-button style="margin-left:0px;" :type="nowSelList && nowSelList.length > 0 ? 'primary' : 'info'" @click="selDone">选择完毕</el-button>
                        </section>
                        <i class="el-icon-circle-close-outline close" title="关闭" @click="close"></i>
                    </div>
                </transition> -->

                <el-form-item label="Banner图片:" class="" prop="url">
                    <div class="prevImg" v-if="imageUrl">
                        <img height="200" :src="imageUrl" alt="">
                        <i class="el-icon-error"  @click="deleteImgList()"></i>
                    </div>
                    <!-- {{item.goodsImg.length}} -->
                    <template v-if="imageUrl==''" >
                        <div class="upload" v-loading="uploadLoading">
                            <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" multiple @change="upload($event)"/>
                            <i class="el-icon-plus"></i>
                        </div>
                    </template>
                    <template v-else>
                        <div class="upload" style="display:inline-block">
                            <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="upload($event)"/>
                            <span>点击更换</span>
                        </div>
                    </template>
                </el-form-item> 
                <el-form-item class= 'right-btn' >
                    <el-button class= '' type="primary" @click="submitForm('ruleForm')">保存</el-button>
                     <el-button class= '' type="primary" @click="goBack('ruleForm')">返回</el-button>
                </el-form-item>
            </el-form>
         
        </div>
  </div>
</template>
<script>
import {getBannerById,getQiniuToken,qiniuBaseUrl,editBanner} from '../../data/postData'
 export default {
    data() {
      return {
        ruleForm: {
          name: '',
          story:'',
          status:'',
          url:'',
          action:'',
          link:'',
          platform:'',
          type:'0'
        },
        option:[
            {
                id:0,
                value:0,
                label:'无跳转'
            },
            {
                id:1,
                value:1,
                label:'有跳转'
            }
        ],
        // searchShopList:null,
        // total:'',
        // page:'1',
        // size:'10',
        // isShow:false,
        // storeList:[],
        // addShopVal:[],
        // nowSelList:[],
        // tableLoading:false,
        status:true,
        imageUrl:'',
        uploadLoading:false,
        rules: {
          name: [
            { required: true, message: '输入轮播名称', trigger: 'blur' },
          ],
          sort: [
            { required: true, message: '输入轮播排序', trigger: 'blur' },
          ],
          action: [
            { required: true, message: '选择是否跳转', trigger: 'blur' },
          ],
          link: [
            { required: true, message: '选择跳转链接', trigger: 'blur' },
          ],
          url: [
            { required: true, message: '上传轮播图片', trigger: 'blur' },
          ],
          status: [
            { required: true, message: '选择轮播状态', trigger: 'blur' },
          ],
        //   shopid: [
        //     { required: true, message: '请选择店铺', trigger: 'blur' },
        //   ],
        }
      };
    },
    mounted(){
        var id = this.$route.params.id,
            params = {
                data:{
                    "id":id
                }
            }
            this.$fetch.post(getBannerById,params).then(res=>{
                console.log(res.data,'data')
                this.ruleForm = res.data
                this.imageUrl = res.data.url
                this.status = this.ruleForm.status == 1 ? true : false
                this.ruleForm.type = '' + res.data.type
            })
    },
    methods: {
        deleteImgList(){
            this.$confirm('确认删除？')
            .then(_ => {
                this.imageUrl = '' 
                this.$message({
                    message:'删除成功',
                    type:'success',
                    duration:1500
                })
            })
            
        },
       upload(e){
        const that = this
        var files = e.target.files[0]
        console.log(files)
        if(files.size / 1000 > 500 && this.ruleForm.type === '1') {
            this.$message.error('图片大于500KB') ;
            return
        }
        this.uploadLoading = true
        this.$http.get(getQiniuToken,{
            params: {
                    "wxUid":"",
                    "wxSid":""
                }
            }).then(res1=>{
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                };
                let formdata = new FormData(); //创建form对象
                formdata.append('file',files,files.name)
                formdata.append('chunk','0'); //断点传输
                formdata.append('chunks','1');
                formdata.append('token',res1.data.uptoken);
                this.$http.post('http://up-z1.qiniup.com',formdata,config).then(res2=>{
                    if (res2.data.key != '') {
                        this.imageUrl = (that.ruleForm.type !== '1' ? qiniuBaseUrl + res2.data.key + '?imageMogr2/thumbnail/400000@' :qiniuBaseUrl + res2.data.key );
                        this.$message.success('图片上传成功')
                        this.uploadLoading = false
                    }
                })  
            }) 
        },
      goBack(){
          this.$router.go(-1)
      },
      submitForm() {
        //   if(this.addShopVal && this.addShopVal.length>0){
        //             let shopArr=[];
        //             this.addShopVal.forEach(item=>{
        //                 shopArr.push(item.storeNo)
        //             })
        //             this.storeList = shopArr
        //             console.log(this.storeList,'this.storeList')
        //         }
          if(this.status){
              this.ruleForm.status = 1
          }else{
              this.ruleForm.status = 0
          }
          if(this.ruleForm.action == 0){
              this.ruleForm.link = ''
          }
          let {id,name,sort,status,action,link,platform,type} = this.ruleForm
          var params = {
              "data":{
                  "id":'' + id,
                  name,
                  "sort": '' + sort,
                  "url": this.imageUrl,
                  "status":''+ status,
                  "action":''+ action,
                  link,
                  platform,
                  type:+type
              }
          }
          console.log(params,'params')
          if(name == ''){
                this.$message.warning('轮播名称不能为空')
          }else if(sort == ''){
                this.$message.warning('轮播排序不能为空')
          }else if(!/^[1-9][0-9]?$/.test(+sort)){
                    this.$message.warning('轮播排序只能为1-99整数')
          }else if(action == 1 && link == ''){
                this.$message.warning('请选择跳转链接')
          }else if(this.imageUrl == ''){
                this.$message.warning('请上传轮播图片')
          }else{
                this.$confirm('确认保存？')
                .then(_ => {
                    this.$fetch.post(editBanner,params).then(res=>{
                        this.$message.success(res.message);
                        setTimeout(()=>{
                            this.$router.go(-1)
                        },1500)
                        
                    }).catch(err=>{
                        this.$message.error(err.message)
                    })
                })
          }
      }
    }
  }
</script>
<style scoped lang="less">
    .addBrand{
        width: calc(~"100% - 250px");
        margin-top: 66px;
        margin-left: 230px;;
        float: left;
        h3{
            margin: 20px 0px
        }
        .input{
          width:50%;
        }
    }
    .avatar-uploader{
            height:200px;
            width:200px;
            border: 1px dashed #333;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
    }
    .el-upload{
      width:200px;height:200px;text-align: center;border:1px solid green;
    }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .right-btn{
          position: absolute;
          right:10%;
          margin-bottom:22px;
        }
         .upload{
            display: block;
            width: 100px;
            height: 100px;
            border:1px dotted #ccc;
            position: relative;
            input{
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                z-index: 999;
                cursor: pointer;
            }
            i{
                font-size: 80px;
                color: #ccc;
                position: absolute;
                top:50%;
                left: 50%;
                transform: translate(-50%,-50%);
                z-index: -1;
            }
        }
 .prevImg{
        position: relative;
        display: inline-block;
        &+.prevImg{
            margin-left: 10px;
        }
        img{
            margin-top: 15px;
        }
        i{
            cursor: pointer;
        }
        i.el-icon-error{
            position: absolute;
            right: -8px;
            top:4px;
            font-size: 20px;
            color: #ec5051;
            cursor: pointer;
        }
        i.el-icon-back{
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20px;
            color: #409EFF;
        }
    }
        .upload{
        display: block;
        width: 100px;
        height: 100px;
        border:1px dotted #ccc;
        position: relative;
        input{
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 999;
            cursor: pointer;
        }
        i{
            font-size: 80px;
            color: #ccc;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: -1;
        }
        span{
            color: #ccc;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 16px;
            width: 100%;
            text-align: center;
        }
    }
//       .selGoods{
//         margin-bottom: 20px;
//         border-bottom: 1px solid #eee;
//         padding-bottom: 20px;
//         section{
//             padding: 20px 0;
//             border: 1px solid #ccc;
//             border-radius: 10px;
           
//         }
//     }
//     .input{
//         width:300px;
//     }
//     .pagination{
//     display: flex;
//     justify-content: center;
//     margin: 20px 0;
    
// }
</style>
